<template>
  <div class="Rent">
    <!-- 头部 -->
    <van-nav-bar title="房屋管理">
      <template #left>
        <van-icon name="arrow-left" class="iconFont" @click="$router.back()" />
      </template>
    </van-nav-bar>

    <div class="empty-container" v-show="RentList.length ? false : true">
      <img src="http://liufusong.top:8080/img/not-found.png" />
      <p>
        您还没有房源，<a class="Rent_link__2yGRO" href="#/rent/add"
          >去发布房源</a
        >吧~
      </p>
    </div>
    <!-- 房屋列表 -->

    <div
      class="ListItem"
      v-for="(item, index) in RentList"
      :key="index"
      @click="OnHouse(item.houseCode)"
    >
      <div class="ItemL">
        <img :src="'http://liufusong.top:8080' + item.houseImg" alt="" />
      </div>
      <div class="ItemR">
        <h3 class="HouseItem_title">{{ item.title }}</h3>
        <p class="HouseItem_desc">{{ item.desc }}</p>
        <p
          class="HouseItem_tag"
          v-for="(item, index) in item.tags"
          :key="index"
        >
          {{ item }}
        </p>

        <p class="HouseItem_price">
          <strong class="HouseItem_priceNum">{{ item.price }}</strong
          >元/月
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'

const { mapState: mapRentState, mapActions: mapRentActions } =
  createNamespacedHelpers('RentList')
export default {
  name: 'rent',
  data () {
    return {}
  },

  created () {
    this.getRent()
  },
  computed: {
    ...mapRentState(['RentList', 'IsShow'])
  },
  methods: {
    ...mapRentActions(['getRent']),
    // async getRent () {
    //   const loading = Toast.loading({
    //     message: '加载中...',
    //     forbidClick: true,
    //     duration: 0 // 持续展示 toast
    //   })
    //   try {
    //     const res = await getRentList()
    //     console.log(res)
    //     this.RentList = res.data.body
    //     loading.clear()
    //     console.log(this.RentList.length)
    //     if (this.RentList.length === 0) {
    //       this.IsShow = true
    //     }
    //     this.IsShow = false
    //   } catch (error) {
    //     Toast('获取房屋管理列表失败！')
    //   }
    // },
    OnHouse (e) {
      this.$router.push('/detail/' + e)
    }
  }
}
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
.Rent {
  .van-nav-bar {
    background-color: #21b97a;
    /deep/.van-nav-bar__title {
      font-size: 18px;
      color: #fff;
    }
    .iconFont {
      color: #fff;
      font-size: 18px;
    }
  }
  .ListItem {
    display: flex;
    width: 375px;
    height: 120px;
    padding-top: 18px;
    box-sizing: border-box;
    // justify-content: space-around;
    /* padding-top: 18px; */
    border-bottom: 1px solid #e5e5e5;
    // position: relative;
    .ItemL {
      img {
        width: 106px;
        height: 80px;
      }
    }
    .ItemR {
      overflow: hidden;
      line-height: 22px;
      padding-left: 12px;
      .HouseItem_title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        margin: 0;
        font-size: 15px;
        color: #394043;
      }
      .HouseItem_desc {
        font-size: 12px;
        color: #afb2b3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
      }
      .HouseItem_tag {
        display: inline-block;
        font-size: 12px;
        border-radius: 3px;
        padding: 4px 5px;
        margin-right: 5px;
        line-height: 12px;
        color: #39becd;
        background: #e1f5f8;
      }
      .HouseItem_price {
        font-size: 12px;
        color: #fa5741;
        .HouseItem_priceNum {
          font-size: 16px;
          font-weight: bolder;
        }
      }
    }
  }
  .empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
      font-size: 14px;
      a {
        color: #33be85;
      }
    }
    img {
      width: 150px;
      margin: 30px 0;
    }
  }
}
</style>
